<template>
  <div class="accout">
    <searchCond @changeSearch="handleSearch"></searchCond>
    <div class="" style="margin-bottom:10px;">
      <a-button type="primary" @click="handleAdd">新增</a-button>
    </div>
    <Btable
      :columns="columns"
      :dataSource="dataSource"
    >
      <!-- <span slot="status" slot-scope="props">
        <a-button size="small" icon="edit"></a-button>
        <div><a-input /></div>
      </span> -->
      <span slot="operate" slot-scope="props">
        <a-button type="primary" size="small" style="font-size:12px;margin-bottom: 5px;" @click="handleStatus(props.text)">修改状态</a-button>
        <a-button type="primary" size="small" style="font-size:12px;" @click="handleResetPwd(props.text)">重置密码</a-button>
      </span>
    </Btable>
    <Modal :modalOptions="modalAddOptions" @handleOk="handleAddSubmit" @handleCancel="handleAddCancel">
      <div slot="modalCon">
        <a-form
          :form="form"
        >
        <a-form-item
          label="账户"
          v-bind="formItemLayout"
        >
          <a-input v-decorator="['account', {
                rules: []
          }]"/>
        </a-form-item>
          <a-form-item
            label="状态"
            v-bind="formItemLayout"
          >
            <a-select
              v-decorator="['status', {
                rules: []
              }]"
            >
              <a-select-option :value="1" :disabled="curStatus===1">
                正常
              </a-select-option>
              <a-select-option :value="0" :disabled="!curStatus===0">
                注销
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </Modal>
    <Modal :modalOptions="modalOptions" @handleOk="handleSubmit" @handleCancel="handleCancel">
      <div slot="modalCon">
        <a-form
          :form="form"
        >
          <a-form-item
            label="状态"
            v-bind="formItemLayout"
          >
            <a-select
              v-decorator="['type', {
                rules: []
              }]"
            >
              <a-select-option :value="1" :disabled="curStatus===1">
                正常
              </a-select-option>
              <a-select-option :value="0" :disabled="!curStatus===0">
                注销
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </Modal>
  </div>
</template>
<script>
import columns from './column'
import Btable from '@/components/Btable'
import Modal from '@/components/Modal'
import searchCond from '@/views/account/searchCond.vue'
import { handleUserList, handleUserUpdate, handleUserReset, handleUserStatus } from '@/server/api'
export default {
  name: 'Account',
  data () {
    return {
      columns,
      dataSource: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 4 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 4 },
          sm: { span: 16 }
        }
      },
      curId: '',
      curStatus: '',
      modalOptions: {
        title: '修改',
        modalVisibile: false,
        cancelText: '取消'
      },
      modalAddOptions: {
        title: '新增',
        modalVisibile: false
      }
    }
  },
  created () {
    this.form = this.$form.createForm(this)
    this.handleUserList()
  },
  components: {
    searchCond,
    Btable,
    Modal
  },
  methods: {
    handleStatus (text) {
      this.curId = text.id
      this.curStatus = text.status
      console.log(this.curStatus, '====')
      this.form.setFieldsValue({
        type: this.curStatus
      })
      this.modalOptions.modalVisibile = true
    },
    handleSearch (values) {
      console.log(values, '==values==')
      this.handleUserList(values)
    },
    handleAdd () {
      this.modalAddOptions.modalVisibile = true
      this.modalOptions.title = '新增'
    },
    handleResetPwd (text) {
      const that = this
      const { id } = text
      this.$confirm({
        title: '确定需要重置密码吗？',
        content: '重置密码将默认账号名后3位+54321,比如你的账户为test  密码就是est54321',
        onOk () {
          const params = {
            id
          }
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve()
            }, 1000)
          }).then(() => {
            console.log('asas')
            that.handleUserReset(params)
          })
        },
        onCancel () {
          console.log('Cancel')
        }
      })
    },
    async handleUserReset (params) {
      console.log(params, '==params==')
      const res = await handleUserReset(params)
      if (res.code === 0) {
        this.$message.success('重置密码成功!')
      } else {
        this.$message.success('重置密码失败!')
      }
    },
    async handleUserList (obj = {}) {
      const params = {
        'pageIndex': 1,
        'pageSize': 10,
        ...obj
      }
      const res = await handleUserList(params)
      if (res.code === 0) {
        this.dataSource = res.data.data
        console.log(res.data.data, '==data==')
      }
    },
    handleSubmit () {
      this.form.validateFields((error, fieldsValue) => {
        console.log(fieldsValue, '==fieldsValue==')
        const params = {
          ...fieldsValue,
          id: this.curId
        }
        handleUserStatus(params).then(res => {
          if (res.code === 0) {
            this.$message.success('更新成功')
            this.modalOptions.modalVisibile = false
            this.handleUserList()
          }
        })
      })
    },
    handleAddSubmit () {
      this.form.validateFields((error, fieldsValue) => {
        console.log(fieldsValue, '==fieldsValue==')
        const params = {
          ...fieldsValue,
          id: 0,
          roleId: 0
        }
        handleUserUpdate(params).then(res => {
          if (res.code === 0) {
            this.$message.success('新增账户成功')
            this.modalAddOptions.modalVisibile = false
            this.handleUserList()
          }
        })
      })
    }
  }
}
</script>
